<template>
    <div>
      <h1>商品管理</h1>
      <table>
        <thead>
          <slot name="header">
            <tr>
              <th>#</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>标签</th>
              <th>操作</th>
            </tr>
          </slot>
        </thead>
        <tbody>
          <slot name="body" :products="products">
            <tr v-for="(product, index) in products" :key="product.id">
              <td>{{ index + 1 }}</td>
              <td>{{ product.name }}</td>
              <td>￥{{ product.price }}</td>
              <td>
                <input v-if="product.isEditing" v-model="product.editTags" placeholder="输入标签，逗号隔开" />
                <span v-else>{{ product.tags.join('，') }}</span>
                <input v-if="product.isEditing" v-model="newTag" placeholder="新增标签" @keyup.enter="addTag(index)" />
                <button v-if="product.isEditing" @click="addTag(index)">添加标签</button>
              </td>
              <td>
                <button @click="toggleEdit(index)">
                  {{ product.isEditing ? '保存' : '编辑' }}
                </button>
                <button @click="removeProduct(index)">删除</button>
              </td>
            </tr>
          </slot>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const products = ref([
    { id: 1, name: 'Teenmix/天美意夏季专柜同款金色布女鞋', price: 298, tags: ['舒适', '透气'], isEditing: false, editTags: '', newTag: '' },
    { id: 2, name: '班俏冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子', price: 89, tags: ['保暖', '防滑'], isEditing: false, editTags: '', newTag: '' },
    { id: 3, name: '初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣', price: 199, tags: ['秋冬', '毛衣'], isEditing: false, editTags: '', newTag: '' },
    { id: 4, name: '嘉叶希蕾丝衫女2022春秋装新款大码女装衬衫上衣雪纺衫韩版打底衬衫长袖', price: 19, tags: ['雪纺衫', '打底'], isEditing: false, editTags: '', newTag: '' },
    { id: 5, name: '熙世界中长款长袖圆领毛衣女2022秋装新款假两件连衣裙女', price: 178, tags: ['圆领', '连衣裙'], isEditing: false, editTags: '', newTag: '' },
  ]);
  
  const removeProduct = (index) => {
    products.value.splice(index, 1);
  };
  
  const toggleEdit = (index) => {
    const product = products.value[index];
    if (product.isEditing) {
      product.tags = product.editTags.split(',').map(tag => tag.trim());
      product.editTags = ''; // 清空输入框
    } else {
      product.editTags = product.tags.join(', ');
    }
    product.isEditing = !product.isEditing;
  };
  
  const addTag = (index) => {
    const product = products.value[index];
    if (product.newTag.trim()) {
      product.tags.push(product.newTag.trim());
      product.newTag = ''; // 清空输入框
    }
  };
  </script>
  
  <style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  th {
    background-color: #f2f2f2;
  }
  
  input {
    width: 100%;
  }
  </style>